// 1. 找到组件中属于同一个业务逻辑的所有代码（响应式数据 + 修改数据的方法）
// 2. 定义一个以 `use` 打头的方法，把第一步所有的业务逻辑代码都放入
// 3. 在use函数内部，把组件中要用到的数据或者方法以对象的方式导出
// 4. 在组件的setup语法糖中，通过调用函数配合解构赋值把函数内部的数据和方法在组件中可用
import { getParkInfo } from "@/apis/park"
import { ref } from "vue"

import * as echarts from 'echarts';

function useGetParkInfos() {
    const parkInfo = ref({})
    const getParkInfos = async() => {
        const res = await getParkInfo()
            // console.log(res)
        parkInfo.value = res.data
            // console.log(parkInfo)
    }
    console.log(parkInfo)
    return { parkInfo, getParkInfos }
}


function useShowBarChart(parkInfo, barChart) {

    const showBarChart = () => {

        const { parkIncome } = parkInfo.value

        // console.log(111,parkIncome)
        const myChart = echarts.init(barChart.value);

        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                },
            },
            grid: {
                // 让图表占满容器
                top: '10px',
                left: '0px',
                right: '0px',
                bottom: '0px',
                containLabel: true,
            },
            xAxis: [{
                type: 'category',
                axisTick: {
                    alignWithLabel: true,
                    show: false,
                },
                data: parkIncome.xMonth,
            }, ],
            yAxis: [{
                type: 'value',
                splitLine: {
                    show: false,
                },
            }, ],
            series: [{
                name: '园区年度收入',
                type: 'bar',
                barWidth: '10px',
                data: parkIncome.yIncome.map((item, index) => {
                    const color =
                        index % 2 === 0 ?
                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0.23, color: '#74c0f8' },
                            { offset: 1, color: 'rgba(116,192,248,0.00)' },
                        ]) :
                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0.23, color: '#ff7152' },
                            { offset: 1, color: 'rgba(255,113,82,0.00)' },
                        ])
                    return { value: item, itemStyle: { color } }
                }),
            }, ],
            textStyle: {
                color: '#B4C0CC',
            },
        }
        myChart.setOption(option);
    }
    return { showBarChart }
}


function useShowPieChart(parkInfo, pieChart) {
    const showPieChart = () => {
        var myChart = echarts.init(pieChart.value);
        var { parkIndustry } = parkInfo.value
        const option = {
            color: [
                '#00B2FF', '#2CF2FF', '#892CFF', '#FF624D', '#FFCF54', '#86ECA2'
            ],
            legend: {
                itemGap: 20,
                bottom: '0',
                icon: 'rect',
                itemHeight: 10, // 图例icon高度
                itemWidth: 10, // 图例icon宽度
                textStyle: {
                    color: '#c6d1db',
                },
            },
            tooltip: {
                trigger: 'item'
            },
            series: [{
                name: '园区产业分析',
                type: 'pie',
                radius: ['55%', '60%'], // 设置内圈与外圈的半径使其呈现为环形
                center: ['50%', '40%'], // 圆心位置， 用于调整整个图的位置
                tooltip: {
                    trigger: 'item',
                    formatter: (params) => {
                        return `${params.seriesName}</br><div style='display:flex;justify-content: space-between;'><div>${params.marker}${params.name}</div><div>${params.percent}%</div></div>`
                    }
                },
                label: {
                    show: false,
                    position: 'center',
                },
                data: parkIndustry,
            }, ],

        }
        myChart.setOption(option);
    }
    return { showPieChart }
}
export { useGetParkInfos, useShowBarChart, useShowPieChart }